<template>
<div>
  <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
    <template #right>
      <van-cell is-link title="发布" @click="show = true" />
      <van-action-sheet v-model:show="show" >
        <van-grid>
          <div class="content">
            <van-image round style="margin-right: 550px" width="1rem" height="1rem" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
            <div style="text-align: right"><a href="draft">草稿</a></div>
            <van-row gutter="100">
              <van-button type="primary" to="/shop">回答问题</van-button>

              <van-button type="primary" color="#00fa9a" style="margin-left: 220px" to="/course">提个问题</van-button>
            </van-row>
          </div>
        </van-grid>
      </van-action-sheet>
    </template>
  </van-nav-bar>
</div>

  <div>
    <van-card>
      <template #title>
        <a style="font-size: 25px; font-weight: bold">创作等级Lv1<br/></a>
      </template>

      <template #desc>
        <a style="font-size: 20px">已在乐悟创作1篇内容</a>
      </template>
    </van-card>
  </div>

  <div>
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
      >
        <van-swipe-item>你有[盐选会员代金券权益]待解锁</van-swipe-item>
        <van-swipe-item>乐悟高赞联合创作大赛获奖作品揭晓</van-swipe-item>
        <van-swipe-item>参与[告别2021|再聊聊这一年]</van-swipe-item>
        <van-swipe-item>你有[小说章节免费劵权益]待解锁</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
  </div>

  <div>
    <van-grid :column-num="3">
      <van-grid-item  text="今日阅读总数1"/>
      <van-grid-item  text="今日赞同总数1" />
      <van-grid-item  text="累计收益1元" />
    </van-grid>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import Draft from "@/views/draft";
export default {
  components: {Draft},
  setup() {
    const onClickLeft = () => history.back();
    const show = ref(false);
    const actions = [

    ];
    const onSelect = (item) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show.value = false;
      Toast(item.name);
    };
    return {
      onClickLeft,
      show,
      actions,
      onSelect,
    };
  },
};
</script>

<style>
.content {
  padding: 10px 10px 100px;
  width: 400px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>